<template>
  <div class="user-card-container">
    <vue-particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options=option />
    <el-card class="user-card" shadow="always">
      <div class="card-header">
        <el-avatar class="user-avatar" size="large" icon="el-icon-user-solid" :src="avatarSrc"></el-avatar>
        <span class="username">{{ userStore.user.username }}</span>
        <el-upload ref="uploadRef" class="upload-demo"
        :show-file-list="false"
        :http-request="clickChangeAvatar"  
        :auto-upload="true">
          <template #trigger>
            <el-button class="edit-button" type="info" size="small">修改头像</el-button>
          </template>
        </el-upload>
      </div>
      <div class="card-content">
        <el-form :model="user" label-position="left" label-width="80px" :rules="currentRules">
          <el-form-item label="新密码:" prop="password">
            <el-input v-model="user.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码:" prop="confirmPassword">
            <el-input v-model="user.confirmPassword" type="password"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-button @click="clickChangePassword()" class="submit-button" type="primary"  >修改密码</el-button>
    </el-card>
  </div>
</template>
  
<script setup lang="ts">
import { Engine } from "tsparticles-engine";
import { loadSlim } from "tsparticles-slim";
import { reactive } from 'vue';
import { ElAvatar, ElButton, ElCard, ElForm, ElFormItem, ElInput, ElMessage, FormRules, UploadRequestOptions } from 'element-plus';
import { putAvatarApi, putPasswordApi } from "@/api/home/user";
import useUserStore from "@/store/module/user";
import {avatarSrc} from "@/compositionApi/comUser.ts"

// const data = await putAvatarApi();

const userStore = useUserStore();


const clickChangeAvatar = async (param: UploadRequestOptions) => {
  console.log(1)

  const file =  param.file;
  const data = await putAvatarApi(file);
  console.log(1)
  if(data.statusCode === 200){
    ElMessage.success(data.message);
    if( data.data.thumbnailAvatar){
      userStore.user.thumbnailAvatar = data.data.thumbnailAvatar;
    }
    
  }

}

const clickChangePassword = async () => {
  const res = await putPasswordApi(user.confirmPassword);
  if(res.statusCode === 200){
    ElMessage.success(res.message);
  }
}


const user = reactive({
  password: '',
  confirmPassword: ''
});



const validatePass2 = (rule: any, value: string, callback: Function) => {
  if (!value) {
    callback(new Error('请再次输入密码'));
  } else if (value !== user.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
};

const currentRules = reactive<FormRules<typeof user>>({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 20, message: '长度需要再8-20个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },

    { validator: validatePass2, trigger: 'blur' }
  ]
});



const particlesInit = async (engine: Engine) => {
  //await loadFull(engine);
  await loadSlim(engine);
};


const particlesLoaded = async (container: any) => {
  console.log("Particles container loaded", container);
};

const jsonString = `{
  "autoPlay": true,
  "background": {
    "color": {
      "value": "#fff"
    },
    "image": "",
    "position": "",
    "repeat": "",
    "size": "",
    "opacity": 1
  },
  "backgroundMask": {
    "composite": "destination-out",
    "cover": {
      "color": {
        "value": "#fff"
      },
      "opacity": 1
    },
    "enable": false
  },
  "defaultThemes": {},
  "delay": 0,
  "fullScreen": {
    "enable": true,
    "zIndex": -1
  },
  "detectRetina": true,
  "duration": 0,
  "fpsLimit": 120,
  "interactivity": {
    "detectsOn": "window",
    "events": {
      "onClick": {
        "enable": false,
        "mode": []
      },
      "onDiv": {
        "selectors": [],
        "enable": false,
        "mode": [],
        "type": "circle"
      },
      "onHover": {
        "enable": true,
        "mode": "trail",
        "parallax": {
          "enable": false,
          "force": 2,
          "smooth": 10
        }
      },
      "resize": {
        "delay": 0.5,
        "enable": true
      }
    },
    "modes": {
      "trail": {
        "delay": 0.005,
        "pauseOnStop": true,
        "quantity": 5,
        "particles": {
          "color": {
            "value": "#ff0000",
            "animation": {
              "enable": true,
              "speed": 400,
              "sync": true
            }
          },
          "collisions": {
            "enable": false
          },
          "links": {
            "enable": false
          },
          "move": {
            "outModes": {
              "default": "destroy"
            },
            "speed": 2
          },
          "size": {
            "value": 5,
            "animation": {
              "enable": true,
              "speed": 5,
              "minimumValue": 1,
              "sync": true,
              "startValue": "min",
              "destroy": "max"
            }
          }
        }
      },
      "attract": {
        "distance": 200,
        "duration": 0.4,
        "easing": "ease-out-quad",
        "factor": 1,
        "maxSpeed": 50,
        "speed": 1
      },
      "bounce": {
        "distance": 200
      },
      "bubble": {
        "distance": 200,
        "duration": 0.4,
        "mix": false,
        "divs": {
          "distance": 200,
          "duration": 0.4,
          "mix": false,
          "selectors": []
        }
      },
      "connect": {
        "distance": 80,
        "links": {
          "opacity": 0.5
        },
        "radius": 60
      },
      "grab": {
        "distance": 100,
        "links": {
          "blink": false,
          "consent": false,
          "opacity": 1
        }
      },
      "push": {
        "default": true,
        "groups": [],
        "quantity": 4
      },
      "remove": {
        "quantity": 2
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4,
        "factor": 100,
        "speed": 1,
        "maxSpeed": 50,
        "easing": "ease-out-quad",
        "divs": {
          "distance": 200,
          "duration": 0.4,
          "factor": 100,
          "speed": 1,
          "maxSpeed": 50,
          "easing": "ease-out-quad",
          "selectors": []
        }
      },
      "slow": {
        "factor": 3,
        "radius": 200
      },
      "light": {
        "area": {
          "gradient": {
            "start": {
              "value": "#ffffff"
            },
            "stop": {
              "value": "#000000"
            }
          },
          "radius": 1000
        },
        "shadow": {
          "color": {
            "value": "#000000"
          },
          "length": 2000
        }
      }
    }
  },
  "manualParticles": [],
  "particles": {
    "bounce": {
      "horizontal": {
        "random": {
          "enable": false,
          "minimumValue": 0.1
        },
        "value": 1
      },
      "vertical": {
        "random": {
          "enable": false,
          "minimumValue": 0.1
        },
        "value": 1
      }
    },
    "collisions": {
      "absorb": {
        "speed": 2
      },
      "bounce": {
        "horizontal": {
          "random": {
            "enable": false,
            "minimumValue": 0.1
          },
          "value": 1
        },
        "vertical": {
          "random": {
            "enable": false,
            "minimumValue": 0.1
          },
          "value": 1
        }
      },
      "enable": false,
      "maxSpeed": 50,
      "mode": "bounce",
      "overlap": {
        "enable": true,
        "retries": 0
      }
    },
    "color": {
      "value": "#ff0000",
      "animation": {
        "h": {
          "count": 0,
          "enable": true,
          "offset": 0,
          "speed": 50,
          "delay": 0,
          "decay": 0,
          "sync": false
        },
        "s": {
          "count": 0,
          "enable": false,
          "offset": 0,
          "speed": 1,
          "delay": 0,
          "decay": 0,
          "sync": true
        },
        "l": {
          "count": 0,
          "enable": false,
          "offset": 0,
          "speed": 1,
          "delay": 0,
          "decay": 0,
          "sync": true
        }
      }
    },
    "groups": {},
    "move": {
      "angle": {
        "offset": 0,
        "value": 90
      },
      "attract": {
        "distance": 200,
        "enable": false,
        "rotate": {
          "x": 3000,
          "y": 3000
        }
      },
      "center": {
        "x": 50,
        "y": 50,
        "mode": "percent",
        "radius": 0
      },
      "decay": 0,
      "distance": {},
      "direction": "none",
      "drift": 0,
      "enable": true,
      "gravity": {
        "acceleration": 9.81,
        "enable": false,
        "inverse": false,
        "maxSpeed": 50
      },
      "path": {
        "clamp": true,
        "delay": {
          "random": {
            "enable": false,
            "minimumValue": 0
          },
          "value": 0
        },
        "enable": false,
        "options": {}
      },
      "outModes": {
        "default": "out",
        "bottom": "out",
        "left": "out",
        "right": "out",
        "top": "out"
      },
      "random": false,
      "size": false,
      "speed": 2,
      "spin": {
        "acceleration": 0,
        "enable": false
      },
      "straight": false,
      "trail": {
        "enable": false,
        "length": 10,
        "fill": {}
      },
      "vibrate": false,
      "warp": false
    },
    "number": {
      "density": {
        "enable": true,
        "width": 1920,
        "height": 1080
      },
      "limit": 0,
      "value": 100
    },
    "opacity": {
      "random": {
        "enable": true,
        "minimumValue": 0.3
      },
      "value": {
        "min": 0.3,
        "max": 0.8
      },
      "animation": {
        "count": 0,
        "enable": true,
        "speed": 0.5,
        "decay": 0,
        "delay": 0,
        "sync": false,
        "mode": "auto",
        "startValue": "random",
        "destroy": "none",
        "minimumValue": 0.3
      }
    },
    "reduceDuplicates": false,
    "shadow": {
      "blur": 0,
      "color": {
        "value": "#000"
      },
      "enable": false,
      "offset": {
        "x": 0,
        "y": 0
      }
    },
    "shape": {
      "close": true,
      "fill": true,
      "options": {},
      "type": "circle"
    },
    "size": {
      "random": {
        "enable": true,
        "minimumValue": 1
      },
      "value": {
        "min": 1,
        "max": 3
      },
      "animation": {
        "count": 0,
        "enable": true,
        "speed": 3,
        "decay": 0,
        "delay": 0,
        "sync": false,
        "mode": "auto",
        "startValue": "random",
        "destroy": "none",
        "minimumValue": 1
      }
    },
    "stroke": {
      "width": 0
    },
    "zIndex": {
      "random": {
        "enable": false,
        "minimumValue": 0
      },
      "value": 0,
      "opacityRate": 1,
      "sizeRate": 1,
      "velocityRate": 1
    },
    "destroy": {
      "bounds": {},
      "mode": "none",
      "split": {
        "count": 1,
        "factor": {
          "random": {
            "enable": false,
            "minimumValue": 0
          },
          "value": 3
        },
        "rate": {
          "random": {
            "enable": false,
            "minimumValue": 0
          },
          "value": {
            "min": 4,
            "max": 9
          }
        },
        "sizeOffset": true,
        "particles": {}
      }
    },
    "roll": {
      "darken": {
        "enable": false,
        "value": 0
      },
      "enable": false,
      "enlighten": {
        "enable": false,
        "value": 0
      },
      "mode": "vertical",
      "speed": 25
    },
    "tilt": {
      "random": {
        "enable": false,
        "minimumValue": 0
      },
      "value": 0,
      "animation": {
        "enable": false,
        "speed": 0,
        "decay": 0,
        "sync": false
      },
      "direction": "clockwise",
      "enable": false
    },
    "twinkle": {
      "lines": {
        "enable": false,
        "frequency": 0.05,
        "opacity": 1
      },
      "particles": {
        "enable": false,
        "frequency": 0.05,
        "opacity": 1
      }
    },
    "wobble": {
      "distance": 5,
      "enable": false,
      "speed": {
        "angle": 50,
        "move": 10
      }
    },
    "life": {
      "count": 0,
      "delay": {
        "random": {
          "enable": false,
          "minimumValue": 0
        },
        "value": 0,
        "sync": false
      },
      "duration": {
        "random": {
          "enable": false,
          "minimumValue": 0.0001
        },
        "value": 0,
        "sync": false
      }
    },
    "rotate": {
      "random": {
        "enable": false,
        "minimumValue": 0
      },
      "value": 0,
      "animation": {
        "enable": false,
        "speed": 0,
        "decay": 0,
        "sync": false
      },
      "direction": "clockwise",
      "path": false
    },
    "orbit": {
      "animation": {
        "count": 0,
        "enable": false,
        "speed": 1,
        "decay": 0,
        "delay": 0,
        "sync": false
      },
      "enable": false,
      "opacity": 1,
      "rotation": {
        "random": {
          "enable": false,
          "minimumValue": 0
        },
        "value": 45
      },
      "width": 1
    },
    "links": {
      "blink": false,
      "color": {
        "value": "random"
      },
      "consent": false,
      "distance": 100,
      "enable": true,
      "frequency": 1,
      "opacity": 1,
      "shadow": {
        "blur": 5,
        "color": {
          "value": "#000"
        },
        "enable": false
      },
      "triangles": {
        "enable": false,
        "frequency": 1
      },
      "width": 1,
      "warp": false
    },
    "repulse": {
      "random": {
        "enable": false,
        "minimumValue": 0
      },
      "value": 0,
      "enabled": false,
      "distance": 1,
      "duration": 1,
      "factor": 1,
      "speed": 1
    }
  },
  "pauseOnBlur": true,
  "pauseOnOutsideViewport": true,
  "responsive": [],
  "smooth": false,
  "style": {},
  "themes": [],
  "zLayers": 100,
  "emitters": [],
  "motion": {
    "disable": false,
    "reduce": {
      "factor": 4,
      "value": true
    }
  }
}`

const option = JSON.parse(jsonString);
</script>
  
<style scoped>
.user-card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
}

.user-card {
  width: 100%;
  max-width: 600px;
  background-color: #FFFFFF;
  /* 使用白色背景 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* 轻微阴影以增强层次感 */
  border-radius: 10px;
  /* 轻微圆角 */
  overflow: hidden;
  /* 确保所有子元素都在圆角内部 */
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  /* 细分隔线 */
}

.user-avatar {
  --el-avatar-size-large: 60px;
  background-color: #f9f9f9;
  /* 更轻的背景色 */
}

.username {
  font-size: 20px;
  /* 调整合适的文字大小 */
  color: #333;
  /* 深色文字，确保可读性 */
}

.edit-button {
  background-color: #409EFF;
  /* 使用主题蓝色 */
  border: none;
}

.card-content {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 20px;
  /* 增加间距 */
}

.el-form-item label {
  color: #333;
  /* 确保标签文字的可读性 */
}

.el-input {
  background-color: #f9f9f9;
  /* 输入框使用更轻的背景色 */
  border: 1px solid #dcdfe6;
  /* 边框颜色与分隔线颜色一致 */
}

.submit-button {
  background-color: #409EFF;
  /* 使用主题蓝色 */
  border: none;
  margin-top: 20px;
  /* 增加按钮与表单的间距 */
  height: 40px;
  /* 给按钮一个适当的高度 */
}
</style>
  
  